<template>
  <div>
    <div id="kuang">
            <div id="middle" v-if="pan">{{xian}}</div>
      <div id="right">
        <div id="top" :style="{ height: gao }"></div>
        <div id="bottom" :style="{ height: gd }">
          <div
            v-for="(fenmu, index) in FristPin" :ref="'FristPin'" :id="fenmu"
          > 
          <div id="fenmu":style="{ height: sho+'vh' }"><div id="fen">{{fenmu}}</div></div>
          <div id="fencheng"  v-for="(fencheng, i) in cityjson[index]" :style="{ height: heg+'vh' }" @click="xuan(i,index)">{{fencheng.name_city}}</div>
          
            </div>
          </div>
        </div>
      </div>
      <div id="left">
        <p id="mue">#</p>
        <p id="mue" v-for="(mu, i) in Frist" :key="mu" @click="zhuan(mu,i)">{{ mu }}</p>
      </div>
    </div>
  </div>
</template>
<script>
import code from "../assets/city_code.json";
import pinyin from "js-pinyin";
export default {
  name: "citycode",
  data() {
    return {
      devicePixelRatio: "",
      clientHeight: "",
      pan: false,
      xian: "",
      gao: "21.5vh",
      heg: 4.5,
      sho: 3,
      gd: "1825.5vh",
      hotcode: ["上海市", "北京市", "南京市", "广州市", "深圳市"],
      Frist: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "J",
        "K",
        "L",
        "M",
        "N",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "W",
        "X",
        "Y",
        "Z",
      ],
      FristPin: [
        "a",
        "b",
        "c",
        "d",
        "e",
        "f",
        "g",
        "h",
        "j",
        "k",
        "l",
        "m",
        "n",
        "p",
        "q",
        "r",
        "s",
        "t",
        "w",
        "x",
        "y",
        "z",
      ],
      cityjson: {},
    };
  },
  methods: {
    fen() {
      var _this = this;
      console.log(code);
      var pinyin = require("pinyin");
      let cityArr = [];
      console.log(code.RECORDS.length);
      for (let i = 0; i < code.RECORDS.length; i++) {
        //遍历数组,拿到城市名称
        let cityName = code.RECORDS[i].name_city;
        let fristName = pinyin(cityName, {
          style: pinyin.STYLE_FIRST_LETTER, // 设置拼音风格
        })[0];
        // console.log(fristName);
        //取全部城市的首字母
        //给原json添加首字母键值对
        code.RECORDS[i].first = fristName;
        //放入新数组
        cityArr.push(code.RECORDS[i]);
      }
      // console.log(cityArr);
      let cityJson = [];
      //根据首字母键值对给原数据按首字母分类
      console.log(_this.FristPin.length);
      for (let i = 0; i < _this.FristPin.length; i++) {
        //这里的FirstPin是一个写入了所有字母的数组,见data中
        cityJson[i] = cityArr.filter(function (value) {
          return value.first == _this.FristPin[i];
        });
      }
      this.cityjson = cityJson;
    },
    xuan(i, index) {
      sessionStorage.setItem("chengshi", this.cityjson[index][i].name_city);
      this.$router.push({
        name: "jiaxiao",
        params: {
          city: this.cityjson[index][i].name_city,
          code: this.cityjson[index][i].code_city,
        },
      });
    },
    zhuan(mu, i) {
      var _this = this;
      this.pan = true;
      this.xian = mu;
      if (this.pan) {
        setTimeout(() => {
          this.pan = false;
        }, 500);
      }
      var a = 0;
      for (var j = 0; j < i; j++) {
        a += _this.$refs.FristPin[j].scrollHeight;
      }
      console.log(a);
      document.documentElement.scrollTop =
        (26.5 * this.clientHeight) / 100 + a * 1;
    },
    client() {
      this.clientHeight = document.documentElement.clientHeight;
      console.log(this.clientHeight);
    },
    bili() {
      this.devicePixelRatio = window.devicePixelRatio;
    },
  },
  mounted() {
    this.fen();
    this.client();
    // this.suan()
  },
};
</script>
<style scoped>
#kuang {
  width: 100%;
  height: 95vh;
}
#right {
  width: 100%;
}
#top {
  background: blue;
  width: 100%;
}
#left {
  position: fixed;
  right: 0;
  text-align: center;
  top: 15%;
}
#bottom {
  width: 100%;
}
#fenmu {
  width: 100%;
  background: rgb(239, 239, 244);
}
#fen {
  width: 96%;
  margin: 0 auto;
  font-size: 3vw;
  line-height: 3.5vw;
  background: rgb(239, 239, 244);
  color: rgb(152, 152, 153);
}
#fencheng {
  width: 96%;
  margin: 0 auto;
  background: white;
  font-size: 2.5vh;
  line-height: 4vh;
  border-bottom: 0.1vh solid rgb(239, 239, 244);
}
#middle {
  font-size: 12vw;
  font-weight: 900;
  line-height: 18vw;
  text-align: center;
  width: 18vw;
  height: 18vw;
  position: fixed;
  top: calc(50vh - 9vw);
  left: calc(50vw - 9vw);
  border: 0.3vw solid rgb(152, 152, 153);
}
#mue {
  font-size: 3vw;
}
</style>
